<template>
  <div id="archive-page">
    <v-card class="pa-3">
      <v-timeline align-top dense>
        <v-timeline-item v-for="(year, i) in articles" color="blue" :key="i" small>
          <!-- <span slot="opposite" :class="`headline font-weight-bold blue--text`" v-text="year.year"></span> -->
          <div class="py-3">
            <h2 class="headline font-weight-light mb-3 blue--text" v-text="year.year"></h2>
            <span class="body-2 grey--text">共{{year.data.length}}篇</span>
            <div>
              <v-list dense>
                <template v-for="item in year.data">
                  <v-list-tile :key="item.id">
                    <v-list-tile-content>
                      <v-list-tile-title>{{ item.title}}</v-list-tile-title>
                    </v-list-tile-content>
                  </v-list-tile>
                </template>
              </v-list>
            </div>
          </div>
        </v-timeline-item>
      </v-timeline>
      <div class="text-xs-center">
        <v-pagination v-model="page" :length="6"></v-pagination>
      </div>
    </v-card>
  </div>
</template>
<script>
export default {
  name: 'archive',
  data: () => ({
    page: 1,
    articles: [
      {
        year: '2017',
        data: [
          { id: 1, title: '文章123' },
          { id: 2, title: '文章123' },
          { id: 3, title: '文章123' },
          { id: 4, title: '文章123' }
        ]
      },
      {
        year: '2018',
        data: [
          { id: 1, title: '文章123' },
          { id: 2, title: '文章123' },
          { id: 3, title: '文章123' },
          { id: 4, title: '文章123' }
        ]
      },
      {
        year: '2019',
        data: [
          { id: 1, title: '文章123' },
          { id: 2, title: '文章123' },
          { id: 3, title: '文章123' },
          { id: 4, title: '文章123' }
        ]
      },
      {
        year: '2020',
        data: [
          { id: 1, title: '文章123' },
          { id: 2, title: '文章123' },
          { id: 3, title: '文章123' },
          { id: 4, title: '文章123' }
        ]
      }
    ]
  })
}
</script>
